<template>
  <div class="course-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-book"></i> 授课查询
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 统计卡片区域 -->
    <div class="statistics-area">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-reading"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ tableData.length }}</div>
          <div class="stat-label">授课总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background-color: #67C23A;">
          <i class="el-icon-user"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ totalStudents }}</div>
          <div class="stat-label">学生总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background-color: #E6A23C;">
          <i class="el-icon-time"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ averageCredit.toFixed(1) }}</div>
          <div class="stat-label">平均学分</div>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        placeholder="搜索课程名称"
        v-model="searchText"
        prefix-icon="el-icon-search"
        clearable
        @clear="resetSearch"
        @input="handleSearch">
      </el-input>
    </div>

    <!-- 课程卡片区域 -->
    <div class="course-cards">
      <el-empty v-if="filteredTableData.length === 0" description="暂无课程数据"></el-empty>
      <div class="course-card" v-for="course in filteredTableData" :key="course.id" :class="{ 'course-card-hover': true }">
        <div class="course-main">
          <div class="course-header">
            <div class="course-title">
              <h3>{{ course.name }}</h3>
              <el-tag size="small" type="primary">{{ course.credit }} 学分</el-tag>
            </div>
            <div class="course-id">课程ID: {{ course.id }}</div>
          </div>
          <div class="course-info">
            <div class="info-item">
              <i class="el-icon-user"></i>
              <span>{{ course.selectedCount }} 名学生</span>
            </div>
            <div class="info-item">
              <i class="el-icon-school"></i>
              <span>{{ course.grade }}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-time"></i>
              <span>{{ course.time }}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-location"></i>
              <span>{{ course.location || '未设置地点' }}</span>
            </div>
          </div>
        </div>
        <div class="course-actions">
          <el-button
            @click="showStudentList(course.id)"
            size="small"
            type="primary"
            icon="el-icon-view">
            查看学生名单
          </el-button>
        </div>
      </div>
    </div>

    <!-- 学生列表对话框 -->
    <el-dialog title="选课学生列表" :visible.sync="dialogVisible" width="80%" class="student-dialog">
      <div class="dialog-header">
        <div class="course-info-dialog" v-if="currentCourse">
          <h3>{{ currentCourse.name }}</h3>
          <div class="course-meta">
            <span><i class="el-icon-school"></i> {{ currentCourse.grade }}</span>
            <span><i class="el-icon-time"></i> {{ currentCourse.time }}</span>
            <span><i class="el-icon-location"></i> {{ currentCourse.location || '未设置地点' }}</span>
          </div>
        </div>
      </div>
      <div class="student-list" v-loading="studentsLoading">
        <el-table :data="studentList" border stripe>
          <el-table-column label="学号" prop="number" />
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="班级" prop="className" />
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{ scope.row.sex === 1 ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="平时成绩" prop="dailyScore" />
          <el-table-column label="考试成绩" prop="examScore" />
          <el-table-column label="总成绩" prop="score" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "../../api/teacher/course";

export default {
  name: "TeacherCourse",
  data() {
    return {
      tableData: [],
      filteredTableData: [],
      searchText: "",
      dialogVisible: false,
      studentList: [],
      studentsLoading: false,
      currentCourseId: null,
      currentCourse: null
    };
  },
  computed: {
    totalStudents() {
      return this.tableData.reduce((sum, course) => {
        return sum + (course.selectedCount || 0);
      }, 0);
    },
    averageCredit() {
      if (this.tableData.length === 0) return 0;
      const totalCredit = this.tableData.reduce((sum, course) => {
        return sum + (parseFloat(course.credit) || 0);
      }, 0);
      return totalCredit / this.tableData.length;
    }
  },
  methods: {
    getList() {
      api.list().then(res => {
        this.tableData = res;
        this.filteredTableData = [...this.tableData];
      });
    },
    showStudentList(courseId) {
      this.currentCourseId = courseId;
      this.currentCourse = this.tableData.find(course => course.id === courseId);
      this.dialogVisible = true;
      this.studentsLoading = true;
      this.studentList = [];
      
      api.listStudent(courseId).then(res => {
        this.studentList = res;
        this.studentsLoading = false;
      }).catch(() => {
        this.studentsLoading = false;
        this.$message.error("获取学生列表失败");
      });
    },
    handleSearch() {
      if (!this.searchText) {
        this.filteredTableData = [...this.tableData];
        return;
      }
      
      const searchLower = this.searchText.toLowerCase();
      this.filteredTableData = this.tableData.filter(course => {
        return course.name.toLowerCase().includes(searchLower) || 
               course.id.toString().includes(searchLower) ||
               (course.location && course.location.toLowerCase().includes(searchLower));
      });
    },
    resetSearch() {
      this.searchText = "";
      this.filteredTableData = [...this.tableData];
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style scoped>
.course-wrap {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
}

/* 统计卡片样式 */
.statistics-area {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 30px;
  color: #fff;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 搜索区域样式 */
.search-area {
  margin-bottom: 20px;
  max-width: 400px;
}

/* 课程卡片样式 */
.course-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.course-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
}

.course-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.course-main {
  padding: 20px;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.course-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-title h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.course-id {
  font-size: 12px;
  color: #909399;
}

.course-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

.info-item i {
  margin-right: 8px;
  color: #909399;
}

.course-actions {
  padding: 15px 20px;
  border-top: 1px solid #EBEEF5;
  text-align: right;
  background-color: #F5F7FA;
}

/* 学生对话框样式 */
.student-dialog .el-dialog__body {
  padding: 10px 20px;
}

.dialog-header {
  margin-bottom: 20px;
}

.course-info-dialog {
  background-color: #F5F7FA;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.course-info-dialog h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  color: #606266;
}

.course-meta span {
  display: flex;
  align-items: center;
}

.course-meta span i {
  margin-right: 5px;
  color: #909399;
}
</style>
